<template>
    <el-container>
       <el-aside :style="{'width': (isCollapse?'69px':'300px')}">
            <el-menu @open="open()" @close="close()" :collapse-transition="true" class="el-menu-vertical-demo" :default-active="shouye" active-text-color="#333333" background-color="#127ef0" text-color="#ffffff" :collapse="isCollapse" :router="true">
             <div class="title"><i class="iconfont icon-icon-beiyangbooks" style="font-size: 38px; font-weight: 500"/><span style="margin-left: 10px">旧 书 回 收 系 统</span></div>
               <template v-for="(item,index1) in $router.options.routes">
                <!-- 超级管理员 -->
                  <el-sub-menu v-if="item.show1" :index="index1+''" :key="index1">
                    <template #title>
                    <i :class="item.icon" style="font-size: 23px; font-weight: 500"></i>
                    <div style="margin-left: 20px;font-size: 15px" v-if="!isCollapse">{{item.name}}</div>
                    </template>
                      <el-menu-item-group v-if="!isCollapse" v-for="(children1,index2) in item.children">
                        <el-menu-item :index="children1.path" :key="index2" v-if="children1.show1">
                          <i :class="children1.icon" style="font-size: 23px; font-weight: 500"></i>
                          <div style="margin-left: 20px;font-size: 15px">{{children1.name}}</div>
                        </el-menu-item>
                      </el-menu-item-group>                  
                  </el-sub-menu>
                  <!-- 普通管理员 -->
                   <el-sub-menu v-if="item.show2 && roleId==10002" :index="index1+''" :key="index1">
                    <template #title>
                    <i :class="item.icon" style="font-size: 23px; font-weight: 500"></i>
                    <div style="margin-left: 20px;font-size: 15px" v-if="!isCollapse">{{item.name}}</div>
                    </template>
                      <el-menu-item-group v-if="!isCollapse" v-for="(children1,index2) in item.children">
                        <el-menu-item :index="children1.path" :key="index2" v-if="children1.show2">
                          <i :class="children1.icon" style="font-size: 23px; font-weight: 500"></i>
                          <div style="margin-left: 20px;font-size: 15px">{{children1.name}}</div>
                        </el-menu-item>
                      </el-menu-item-group>                  
                  </el-sub-menu>
              </template>
            </el-menu>         
        </el-aside>
       
      <el-container>
       <el-header class="header">
          <el-row class="card">
              <el-row style="display: flex;justify-content: space-between; align-items: center;">
                 <div @click="isCollapse = !isCollapse" style="margin-top: 5px" id="collapse">
                   <el-icon size="25" v-if="isCollapse" color="blue"><Expand /></el-icon>
                   <el-icon v-else size="25"><Fold /></el-icon>
                </div>
                <div style="margin-left: 30px;font-size: 40px;">
                  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 18px">
                  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                  <el-breadcrumb-item v-for="v in listsBread" :to="{path: v.path}" :key="v.path">{{v.name}}</el-breadcrumb-item>
                  </el-breadcrumb>
                </div>
              </el-row>  
            </el-row>
             <el-row class="iconRight">
                <el-button @click.prevent.stop="handleGuide" id="guide" link>
                  <el-tooltip content="导航" placement="bottom">
                  <el-icon size="25"><Promotion /></el-icon>
                  </el-tooltip>
                </el-button>
                <screenfull class="right-menu-item hover-effect" id="screen"/>
                
                <el-dropdown>
                  <el-icon size="25" style="margin-left: 10px"><setting/></el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="updatePassword()">修改密码</el-dropdown-item>
                     <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                 </template>
              </el-dropdown>
              </el-row>  
      </el-header>
        <el-container>
          <el-main class="el-main-class">    
              <div class="head_tag">
                  <el-tag v-for="tag, index in tags" :key="index" :closable="tag.path !== '/home'" class="mx-1"
                            :disable-transitions="false" @close="handleClose(tag)">
                            <router-link :to="tag.path"><div style="font-size: 18px">{{ tag.name }}</div></router-link>
                  </el-tag>
              </div>
            <div style="margin-top: 10px">
                <el-card>
                  <router-view></router-view>
                </el-card>               
            </div>  
          </el-main>
        </el-container>
      </el-container>
    </el-container>
</template>
<script setup>
import { Menu as IconMenu, Message, Setting,Expand,FullScreen,Fold,Promotion,User,House,Histogram } from '@element-plus/icons-vue'
import {onMounted, reactive, ref, watch} from 'vue'
import{useRoute} from 'vue-router'
import Screenfull from '@/components/ScreenFull.vue'
import router from '@/router'
import Driver from "driver.js";
import {steps} from "@/components/driver/steps"
import "driver.js/dist/driver.min.css";
import { StarFilled } from '@element-plus/icons-vue'
import { ElLoading,ElMessage ,ElMessageBox} from 'element-plus'
import store from '../../store/index'

// let tabIndex = 2
// const editableTabsValue = ref('2')

let driver
let roleId = ref(-1)
let isCollapse = ref(false)
const route = useRoute()
const listsBread = ref([])//路由数据
const tags = reactive([
    { name: '首页', path: '/home' }
])

//将左侧点击的未出现过的路由放到listsBread里面去
const getBreadcrumb = matched =>{
  listsBread.value = matched
  console.log(listsBread)
  console.log(listsBread[0])
  console.log(listsBread[1])
  // console.log(listsBread[0].name)
  // listsBread = matched
  // if(!listsBread.includes(matched[1])){
  //    listsBread.push(matched[1]);
  // }
}
//处理点击事件
const handleTabsEdit = (targetName,action) => {
  if (action === 'remove') {
    console.log("以下是所有")
    console.log(targetName)
    console.log(action)
    console.log(listsBread.value)
    console.log(editableTabsValue.value)
    console.log(tabs)
    }
}
const handleClose = (tag) => {
    const index = tags.findIndex((t) => t.path === tag.path);
    if (index !== -1) {
        router.push(tags[index - 1].path);
        setTimeout(() => {
            tags.splice(index, 1);
        }, 0)
    }
}

//监听路由变化
watch(route,(to,from)=>{
  
  getBreadcrumb(route.matched);
  console.log(route.matched[1]);
  console.log("有到这里来吗")
  console.log(listsBread)

   // 如果当前路径不是 '/' 并且该路径没有对应的标签，则新增一个标签
    if (route.matched[1].path !== '/home' && !tags.some((tag) => tag.path === route.matched[1].path)) {
        const tag = { name: route.matched[1].name, path: route.matched[1].path };
        tags.push(tag);
    }
})
onMounted(()=>{
  roleId.value = store.state.roleId;
  console.log(route.matched);
  console.log("这里呢")
  getBreadcrumb(route.matched);
  driver = new Driver({
  animate: false, // Whether to animate or not
  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
  padding: 10, // Distance of element from around the edges
  allowClose: true, // Whether the click on overlay should close or not
  overlayClickNext: false, // Whether the click on overlay should move next
  doneBtnText: "Done", // Text on the final button
  closeBtnText: "关闭", // Text on the close button for this step
  stageBackground: "#ffffff", // Background color for the staged behind highlighted element
  nextBtnText: "下一步", // Next button text for this step
  prevBtnText: "上一步", // Previous button text for this step
  });
})

const handleGuide = () => {
  const t = 1
  driver.defineSteps(steps);
  driver.start();
}
const loginOut = () => {
  ElMessageBox.confirm(
    '确定要退出登陆吗？',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      //退出登陆成功将数据全部移除并将退出到登陆页面
      localStorage.clear();
      router.push("/")
      ElMessage({type: "success",message: "退出成功"});
      }).catch((err) => {
        ElMessage({type: "warning",message: "取消退出"});
        console.log(err)
      })
}

const open = (key,path) => {

}
const close = (key,path) => {

}
</script>
<style lang="scss" scoped>
.title{
  display: flex;
  align-items: center;
  // justify-content: center;
  margin-left: 20px;
    font-size: 25px;
    font-weight: 100;
    height: 100px;
    width: 300px;
    background-color: #127ef0;
    color: #ffffff;
    }
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  background-color: #127ef0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 300px;
  min-height: 800px;
}
.el-menu-vertical-demo{
  width: 69px;
  min-height: 800px;
}
.card{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .iconRight{
    margin-left: 70%;
  }
}
.head_tag{
  font-size: 30px;
  .mx-1{
    height: 30px;
  }
}

// "#100c2A" 
</style>
